<template>
	<view>
		<sa-tabs ref="tabRef" :tabList="tabList" @onClickTab="tabChange"></sa-tabs>
		<view class="list-panel">
			<view class="order" v-for="item in orders" :key="item.id" @click="gotoOrderDetail(item.id)">
				<view class="order-info">
					<view class="order-image">
						<image :src="item.shopLogo || '/static/logo.png'" mode="scaleToFill"></image>
					</view>
					<view class="order-shop-info">
						<text class="order-shop-name">{{item.shopName}}</text>
						<text class="order-table-code">{{orderNum(item)}}</text>
						<text class="order-create-time">{{formatDateTime(item.createTime)}}</text>
					</view>
					<view class="order-status">
						<text v-if="item.payState === 1" class="complate">完成</text>
						<text v-else-if="item.payState === 2" class="wait-pay">创建订单</text>
						<text v-else-if="item.payState === 3" class="running">已支付</text>
					</view>
				</view>
				<view v-if="item.payState !== 2" class="order-complate">
					<text>订单金额:{{priceTransform(item.orderMoney)}}</text>
					<text>余额支付:{{priceTransform(item.walletPayMoney)}}</text>
					<text>消费折返:{{priceTransform(item.backMoney)}}</text>
					<text>实际支付:{{priceTransform(item.realPayMoney)}}</text>
				</view>
				<view v-else class="order-cost">
					<text>订单金额:{{priceTransform(item.orderMoney)}}</text>
				</view>
				<view class="line"></view>
				<view class="order-opre">
					<template v-if="item.payState === 2">
						<view>
							<button size="mini" @click.stop="cancelOrderClick(item.id)">取消订单</button>
						</view>
						<view>
							<button size="mini" type="primary" @click.stop="gotoOrderDetail(item.id)">去支付</button>
						</view>
					</template>
					<template v-else-if="item.payState === 1">
						<view>
							<button size="mini" type="primary" @click.stop="deleteOrderclick(item.id)">删除订单</button>
						</view>
					</template>
				</view>
			</view>
			<uni-load-more :status="status" />
		</view>
		<u-empty v-if="orders.length === 0" mode="order"></u-empty>
	</view>
</template>

<script>
	import {
		getMyAllOrder,
		getWaitPayOrder,
		getRunningOrder,
		getCompleteOrder,
		getRefundOrder,
		cancelOrder,
		deleteOrder,
		getMyOrderByState
	} from '@/api/consomer/myOrder/myOrder.js'
	import {
		transform
	} from '@/minix/mixin.js'
	import {
		throttle
	} from '@/utils/reqUtil.js'
	export default {
		mixins: [transform],
		data() {
			return {
				orders: [],
				tabList: [{
					text: '待付款',
				}, {
					text: '已支付'
				}, {
					text: '已完成'
				}, {
					text: '全部',
				}],
				current: 1,
				totalPage: 0,
				status: 'more',
				currentTab: '待付款',

				orderState: 2
			}
		},
		onLoad() {

			this.init()
		},
		onReachBottom() {
			if (this.status === 'noMore') {
				return
			}
			throttle(() => {
				this.current++;
				this.getMyOrder()
			})()
		},
		onPullDownRefresh() {
			throttle(() => {
				this.orders = []
				this.current = 1
				this.getMyOrder()
			})()
		},
		onShow() {
			let hasNewOrder = getApp().globalData.newOrder
			if (hasNewOrder) {
				getApp().globalData.newOrder = false
				if (this.currentTab !== '已支付') {
					this.$refs.tabRef.sendTabItem({
						target: {
							dataset: {
								current: 1
							}
						}
					})
				} else {
					uni.startPullDownRefresh()
				}
			}
		},
		methods: {
			init() {
				this.getMyOrder()
			},
			getMyOrder() {
				this.status = 'loading'
				getMyOrderByState({
					current: this.current,
					orderState: this.orderState
				}).then((res) => {
					if (this.current == 1) {
						this.totalPage = res.totalPage
					}
					if (this.totalPage <= res.page) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
					if (res.list.length > 0) {
						this.orders.push(...res.list)
					}
				}).catch((e) => {
					this.status = 'noMore'
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},

			tabChange(e) {
				this.currentTab = e.text
				this.current = 1
				this.orders = []
				if (e.text === '待付款') {
					this.orderState = 2
				} else if (e.text === '已支付') {
					this.orderState = 3
				} else if (e.text === '已完成') {
					this.orderState = 1
				} else if (e.text === '全部') {
					this.orderState = ''
				}
				this.getMyOrder()
			},
			orderNum(item) {
				if (item.serialNum) {
					return '流水号:' + item.serialNum.toString().padStart(4, '0')
				}
				if (item.deskName) {
					return '桌号:' + item.deskName
				}
				return '';
			},
			cancelOrderClick(id) {
				uni.showModal({
					title: '确定要取消订单吗',
					success: async (res) => {
						if (res.confirm) {
							const rs = await cancelOrder(id);
							if (rs) {
								this.orders = this.orders.filter(item => item.id !== id);
							}
						}
					}
				})
			},
			deleteOrderclick(id) {
				uni.showModal({
					title: '删除后您将看不见该订单',
					success: async (res) => {
						if (res.confirm) {
							const rs = await deleteOrder(id);
							if (rs) {
								this.orders = this.orders.filter(item => item.id !== id);
							}
						}
					}
				})
			},
			gotoOrderDetail(orderId) {
				uni.navigateTo({
					url: "/subpkg/consumer/orderDetail/orderDetail?id=" + orderId
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 30px;

		.order {
			border-radius: 5px;
			width: 95%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-top: 10px;
			padding: 10px;
			box-shadow: 0 0 2px 1px #ccc;

			.order-info {
				display: flex;
				flex-direction: row;
			}

			.order-image {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 8px;
				}
			}

			.order-shop-info {
				flex: 1;
				font-size: 14px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 5px;

				.order-shop-name {
					font-size: 14px;
					font-weight: bold;
				}

				.order-table-code {
					font-size: 13px;
					font-weight: 400;
				}

				.order-create-time {
					font-size: 12px;
					color: #b9b9b9;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: flex-end;

				}
			}

			.order-status {
				font-size: 13px;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				font-weight: bold;

				.running {
					color: $base-color;
				}

				.wait-pay {
					color: red;
				}

				.complate {
					color: #e39f82;
				}

			}

		}

		.order-complate {
			display: grid;
			grid-template-columns: 50% 50%;
			font-size: 13px;
		}

		.order-cost {
			font-size: 13px;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}

		.line {
			border-bottom: 1px solid #ccc;
			margin: 10px 0;
		}

		.order-opre {
			display: flex;
			justify-content: flex-end;

			view {
				margin-left: 10px;
			}
		}
	}
</style>